<template>
	<view>
		<view v-if="card.length > 0" style="background: #FFFFFF;">
			<view v-for="cardItem in card"  style="padding: 10rpx;">
				<tui-card :image="cardItem.avatar" :title="cardItem.title" :full="true" :header="cardItem.header" :border="false" @click="detail"
				  @longclick="detail">
						<template v-slot:body>
							<view class="tui-content">
								{{cardItem.content}}
							</view>
							<view class="tui-default tui-flex-pic">
								<image v-for="item,i in cardItem.img" :key="i" :src="item" mode="widthFix"></image>
							</view>
						</template>
						<template v-slot:footer>
							<view class="tui-default tui-pleft">
								<view>{{cardItem.address}}</view>
								<view class="tui-color-gray">{{cardItem.tag.text}}</view>
							</view>
						</template>
				</tui-card>
			</view>
		</view>
		<view v-else  class="no_body"><u-empty text="\n所谓伊人，在水一方\n\n还没有人发过动态" mode="list"></u-empty></view>
	</view>
</template>

<script>
	export default {
		name:"indexMoment",
		data() {
			return {
				card: [{
						avatar: {
							url: "/static/icon/ui/user/avatar/1.png"
						},
						title: {
							text: "手心的蔷薇"
						},
						content:"记录近日天空。",
						address:"南京.浦口",
						tag: {
							text: "20分钟前"
						},
						header: {
							bgcolor: "#ffffff",
							line: true
						},
						img:[
								'/static/icon/ui/moment/1.jpg',
								'/static/icon/ui/moment/2.jpg',
								'/static/icon/ui/moment/3.jpg',
								'/static/icon/ui/moment/4.jpg',
								'/static/icon/ui/moment/5.jpg',
								'/static/icon/ui/moment/6.jpg',
								'/static/icon/ui/moment/7.jpg',
								'/static/icon/ui/moment/8.jpg',
								'/static/icon/ui/moment/9.jpg',
							]
					},{
						avatar: {
							url: "/static/icon/ui/user/avatar/2.png"
						},
						title: {
							text: "乐乐"
						},
						content:"天气晴，宜收集快乐。",
						address:"北京.故宫",
						tag: {
							text: "1小时前"
						},
						header: {
							bgcolor: "#ffffff",
							line: true
						},
						img:[
								'/static/icon/ui/moment/10.jpg',
								'/static/icon/ui/moment/11.jpg',
								'/static/icon/ui/moment/12.jpg',
								'/static/icon/ui/moment/13.jpg',
								'/static/icon/ui/moment/14.jpg',
								'/static/icon/ui/moment/15.jpg',
							]
					},{
						avatar: {
							url: "/static/icon/ui/user/avatar/3.png"
						},
						title: {
							text: "手心"
						},
						content:"再忙也要捕捉快乐呀。",
						address:"上海.外滩",
						tag: {
							text: "2小时前"
						},
						header: {
							bgcolor: "#ffffff",
							line: true
						},
						img:[
								'/static/icon/ui/moment/16.jpg',
								'/static/icon/ui/moment/17.jpg',
								'/static/icon/ui/moment/18.jpg',
							]
					},{
						avatar: {
							url: "/static/icon/ui/user/avatar/4.png"
						},
						title: {
							text: "蔷薇"
						},
						content:"现实是此岸，成功是彼岸",
						address:"长沙.五一广场",
						tag: {
							text: "3小时前"
						},
						header: {
							bgcolor: "#ffffff",
							line: true
						},
						img:[
								'/static/icon/ui/moment/19.jpg',
								'/static/icon/ui/moment/20.jpg',
								'/static/icon/ui/moment/21.jpg',
								'/static/icon/ui/moment/22.jpg',
								'/static/icon/ui/moment/23.jpg',
								'/static/icon/ui/moment/24.jpg',
							]
					},{
						avatar: {
							url: "/static/icon/ui/user/avatar/5.png"
						},
						title: {
							text: "琪琪"
						},
						content:"玩了一天的游戏，累了",
						address:"娄底.大科街道",
						tag: {
							text: "9小时前"
						},
						header: {
							bgcolor: "#ffffff",
							line: true
						},
						img:[
								'/static/icon/ui/moment/25.jpg',
								'/static/icon/ui/moment/26.jpg',
								'/static/icon/ui/moment/27.jpg',
							]
					},{
						avatar: {
							url: "/static/icon/ui/user/avatar/6.png"
						},
						title: {
							text: "手心的蔷薇"
						},
						content:"拥有了自己的天地，才博得了天下人的青睐。",
						address:"南京.浦口",
						tag: {
							text: "15小时前"
						},
						header: {
							bgcolor: "#ffffff",
							line: true
						},
						img:[
								'/static/icon/ui/moment/28.jpg',
								'/static/icon/ui/moment/29.jpg',
								'/static/icon/ui/moment/30.jpg',
								'/static/icon/ui/moment/31.jpg',
								'/static/icon/ui/moment/32.jpg',
								'/static/icon/ui/moment/33.jpg',
								'/static/icon/ui/moment/34.jpg',
								'/static/icon/ui/moment/35.jpg',
								'/static/icon/ui/moment/36.jpg',
							]
					}
				]
			};
		},
		methods: {
			detail: function() {
				console.debug('动态详情');
				uni.navigateTo({
					url:'../../pages/moment_details/moment_details'
				});
				return;
				uni.showToast({
					title: '点了我也没用，我没有被开发~',
					icon:'none',
					duration: 2000
				});
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tui-title {
		width: 100%;
		padding: 70rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		line-height: 30rpx;
		color: #666;
	}
	
	.tui-default {
		padding: 20rpx 30rpx;
	}
	
	.tui-article {
		position: relative;
	}
	
	.tui-article-img {
		width: 100%;
		height: 300rpx;
		display: block;
	}
	
	.tui-article-title {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	}
	
	.tui-cell-title {
		font-size: 32rpx;
		font-weight: 500;
		padding: 0 10rpx;
		word-break: break-all;
		word-wrap: break-word;
	}
	
	.tui-cell-img {
		height: 160rpx;
		width: 160rpx;
	}
	
	.tui-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tui-mr {
		margin-right: 20rpx;
	}
	
	
	.tui-flex-pic {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		background: #fff;
		padding: 0 120rpx;
	}
	
	.tui-flex-pic image {
		width: 32%;
		margin-bottom: 2%;
	}
	
	.tui-content {
		padding: 0rpx 30rpx 20rpx 120rpx;
		box-sizing: border-box;
		font-size: 34rpx;
		font-weight: 400;
		color: #333;
	}
	
	.tui-color-gray {
		color: #ccc;
	}
	
	.tui-pleft {
		padding-left: 120rpx;
	}
	.no_body{
		margin-top: 50rpx;
	}
</style>
